<template>
    <div class="user-menu" v-show="visible" :style="position">
        <div class="user-info">
            <h3>{{ userInfo.nickname }}</h3>
            <p class="email">{{ userInfo.email }}</p>
        </div>
        <div class="menu-items">
            <router-link to="/account/profile" class="menu-item">
                <img src="@/assets/header/zhanghu.png" alt="" />
                我的账户
            </router-link>
            <router-link to="/account/subscription" class="menu-item">
                <img src="@/assets/header/taocan.png" alt="" />
                我的套餐
            </router-link>
            <!-- <router-link to="/support" class="menu-item">
                <img src="@/assets/header/zhichi.png" alt="" />
                支持
            </router-link> -->
        </div>
        <div class="pro-button">
            <button class="upgrade-btn">立即解锁PRO</button>
        </div>
        <div class="menu-footer">
            <button class="logout-btn" @click="handleLogout">
                <img src="@/assets/header/logout.png" alt="" />
                登出
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import encrypt from '@/utils/encrypt.js'
const userInfo = encrypt.GetLocalData('userInfo')
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    position: {
        type: Object,
        default: () => ({})
    },
})

const router = useRouter()

const handleLogout = () => {
    // 处理登出逻辑
    encrypt.ClearLocalData('accessToken')
    encrypt.ClearLocalData('refreshToken')
    encrypt.ClearLocalData('userInfo')
    router.push('/login')
}
</script>

<style lang="scss" scoped>
.user-menu {
    position: absolute;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 1000;

    .user-info {
        padding: 12px 0;
        border-bottom: 1px solid #eee;

        h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .email {
            font-size: 14px;
            color: #666;
        }
    }

    .menu-items {
        padding: 8px 0;
        border-bottom: 1px solid #eee;

        .menu-item {
            display: flex;
            align-items: center;
            padding: 12px;
            color: #333;
            text-decoration: none;
            border-radius: 8px;
            transition: background-color 0.2s;

            img {
                width: 20px;
                height: 20px;
                margin-right: 12px;
            }

            &:hover {
                background-color: #f5f5f5;
            }
        }
    }

    .pro-button {
        padding: 16px 0;
        border-bottom: 1px solid #eee;

        .upgrade-btn {
            width: 100%;
            padding: 12px;
            background: #f4511e;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;

            &:hover {
                background: #e64a19;
            }
        }
    }

    .menu-footer {
        padding: 8px 0;

        .logout-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            background: none;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            color: #666;
            transition: background-color 0.2s;

            img {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }

            &:hover {
                background-color: #f5f5f5;
            }
        }
    }
}
</style>
